<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:composite="http://java.sun.com/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<composite:interface>
	<composite:attribute name="images" type="java.util.List" required="true"/>
	<composite:attribute name="thumbWidth" />
	<composite:attribute name="thumbHeight" />
	<composite:attribute name="styleClass" />
</composite:interface>

<composite:implementation>
	<h:outputStylesheet library="fancybox/source/css" name="jquery.fancybox.css" target="head"/>
	<h:outputStylesheet library="fancybox/source/css" name="jquery.fancybox-thumbs.css" target="head"/>
	<h:outputScript library="fancybox/source/js" name="jquery.fancybox.pack.js" />
	<h:outputScript library="fancybox/source/js" name="jquery.fancybox-thumbs.js" />
	<!-- For Hash-Tags -->
	<script type="text/javascript">
		var thisHash = window.location.hash;
		$(document).ready(function() {
			$('.fancybox').fancybox({
				preload : '0',
				padding : '0',
				helpers : {
					title : {
						'type' : 'outside',
					},
					overlay : {
						css : {
							'background' : 'rgba(00, 00, 00, 0.93)',
						}
					},
					thumbs : {}
				},
				beforeShow : function() {
					var id = this.element.attr("id")
					if (id) {
						window.location.hash = id;
					}
					$.fancybox.wrap.bind("contextmenu", function(e) {
						return false;
					});
				},
				beforeClose : function() {
					var scroll = $(window).scrollTop();
					window.location.hash = "";
					$(window).scrollTop(scroll);
				}
			});
			if (thisHash) {
				$(thisHash).trigger('click');
			}
		});
	</script>
	<p:dataGrid var="image" value="#{cc.attrs.images}"
		columns="7">
		<a id="#{image.id}" class="fancybox" rel="fancybox-thumb"
			title="#{image.name}" href="image/normal/#{image.id}/#{image.fullName}"> 
			<h:graphicImage value="image/thumb/#{image.id}/#{image.fullName}" alt="#{image.name}"
				styleClass="#{cc.attrs.styleClass}" width="#{cc.attrs.thumbWidth}"
				height="#{cc.attrs.thumbHeight}" />
		</a>
	</p:dataGrid>
</composite:implementation>
</html>